"use client";
import React, { useState } from "react";
import SectionTitle from "../Common/SectionTitle";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Scrollbar, A11y } from "swiper/modules";
import "swiper/css"; // 引入样式
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import Image from "next/image";
import Link from "next/link";

const Pricing = () => {
  const [isMonthly, setIsMonthly] = useState(true);

  return (
    <section
      id="pricing"
      className="relative z-10 border-t border-body-color/[.15] py-16 md:py-20 lg:py-28"
    >
      <div className={`container`}>
        <Swiper
          modules={[Navigation, Pagination, A11y]}
          spaceBetween={50}
          slidesPerView={1}
          navigation
          pagination={{ clickable: true }}
          onSwiper={(swiper) => console.log(swiper)}
          onSlideChange={() => console.log("slide change")}
          loop={true}
          autoplay={true}
          speed={1000}
          centeredSlides={true}
          effect={"coverflow"}
          coverflowEffect={{
            rotate: 30,
            stretch: 10,
            depth: 60,
            modifier: 2,
            slideShadows: true,
          }}
        >
          <SwiperSlide>
            <div className={"-mx-4 flex flex-wrap items-center"}>
              <div className=" w-full px-4 lg:w-1/2">
                <SectionTitle
                  title="多元纠纷调解平台DMP"
                  paragraph={
                    <div>
                      秉持着"互联网+智慧调解"的核心理念，全方位、数据化对纠纷进行管理和把控
                      <div className={"text-right"}>
                        <Link
                          href="/dmp"
                          className="pr-1 text-base font-medium text-body-color"
                        >
                          前往了解更多
                        </Link>
                      </div>
                    </div>
                  }
                  mb="44px"
                />
              </div>
              <div className=" w-full px-4 lg:w-1/2">
                <Image
                  src="/images/home/banner1.png"
                  alt="首页"
                  width={760}
                  height={330}
                />
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className={"-mx-4 flex flex-wrap items-center"}>
              <div className=" w-full px-4 lg:w-1/2">
                <SectionTitle
                  title="案件管理系统CMP"
                  paragraph={
                    <div>
                      通过数字化手段提高工作效率，简化工作流程，确保信息的安全与准确
                      <div className={"text-right"}>
                        <Link
                          href="/cmp"
                          className="pr-1 text-base font-medium text-primary"
                        >
                          前往了解更多
                        </Link>
                      </div>
                    </div>
                  }
                  mb="44px"
                />
              </div>
              <div className="w-full px-4 lg:w-1/2">
                <Image
                  src="/images/home/banner2.png"
                  alt="首页"
                  width={760}
                  height={330}
                />
              </div>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
    </section>
  );
};

export default Pricing;
